微信小程序开发: 小程序源文件结构及含义

本文将对微信小程序源文件结构及含义进行详细讲解，部分描述直接转载于官方文档，若有不明问题，可继续查看小程序官方文档，传送门>>>

下面是基本的目录和文件结构：

|--app.js
|--app.json
|--app.wxss
|--pages
   |--index
      |--index.js
      |--index.wxml
      |--index.wxss
      |--index.json
|--project.config.json

类型文件说明：

• .json 配置文件
• .wxml 模板文件
• .js javascript逻辑文件
• .wxss 样式文件

以下将对每种类型文件进行详细说明。

配置文件

小程序中存在三类配置文件，分别为：

1. 小程序配置：根目录下的app.json
2. 工具配置：根目录下的project.config.json文件
3. 页面配置：pages/index/目录(具体页面目录)下的index.json

小程序配置文件app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。【摘自官方文档】

app.json

{
    "pages": [
        "pages/index/index",
        "pages/reward/reward"
    ],
    "window": {
        "navigationBarTitleText": "猜猜你的真实年龄",
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTextStyle": "white",
        "navigationStyle": "default",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": false
    },
    "tabBar": {
        "color": "#9ca0a3",
        "selectedColor": "#00ae66",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "asset/icon/home.png",
                "selectedIconPath": "asset/icon/home_selected.png"
            },
            {
                "pagePath": "pages/reward/reward",
                "text": "打赏",
                "iconPath": "asset/icon/reward.png",
                "selectedIconPath": "asset/icon/reward_selected.png"
            }
        ]
    },
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "downloadFile": 5000,
        "uploadFile": 5000
    },
    "debug": true
}

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

window

主要用于设置wxss中无法自定义的样式，例如修改小程序的状态栏、导航条、标题、窗口背景色等。

tabBar

设置小程序底部(或顶部)的tab栏的展示和切换时所展示的页面。

networkTimeout

设置各种网络请求的超时时间。

debug

设置是否开启调试模式。

页面配置index.json

每一个小程序页面也可以使用.json文件来对项目app.json 中的 window 项进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

项目配置文件 project.config.json

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

详细参数请参考官方文档

wxml 模板

用来定义小程序页面的结构，在wxml中我们可以：

1. 使用小程序框架提供的丰富的web组件，提高开发效率；
2. 支持wx:if流程控制，数据绑定等特性；
3. DOM渲染和页面逻辑分离(类似Vue);

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1. 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. 此外 WXSS 仅支持部分 CSS 选择器。

JS 逻辑文件

1. 页面交互逻辑；
2. API调用；

本章结尾

小程序基础知识本系列文章只介绍这么多，接下来将进行项目实战，敬请关注！

更多内容请大家移步官方文档：

• 官方提供的小程序入门建教程
• 小程序开发框架文档
• 小程序内置视图组件文档
• 小程序可调用的微信API文档
• 开发者工具文档

下期预告

下篇文章将进行小程序实际开发讲解，敬请期待。

微信交流群

微信群二维码会定时失效，为了方便更新，将入群二维码放到了Github上 传送门>>>